<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <!-- React核心包 最先引入 提供一个对象React -->
  <script src="../00.依赖包/react.development.js"></script>
  <!-- React操作Dom包  提供了一个对象 ReactDOM-->
  <script src="../00.依赖包/react-dom.development.js"></script>
  <!-- 引入Babel包,用来解析JSX语法为js语法 -->
  <script src="../00.依赖包/babel.min.js"></script>
  <style>
  </style>
</head>

<body>
  <div id="app"></div>
  <button id="btn">点击按钮更新NB!</button>
  <!-- 如果需要babel对当前的script内部的jsx进行编译，则需要设置script标签的type属性-->
  <script type="text/babel">
    let content = 'NB!'
    const vDOM = (
      <div>
        <h1>!</h1>
        <p>{content}</p>
      </div>
    )
    //创建容器并渲染虚拟DOM
    const Root = ReactDOM.createRoot(document.getElementById('app'))
    Root.render(vDOM)
      /* 
        当虚拟dom使用了某一个变量的时候,并修改其变量，并重新渲染,没有效果
        - vDOM不可变,只能重新生成新的vDOM,然后重新渲染
        - 变量改变了,并没有生成新的虚拟DOM,当前肯定没有效果
        - 组件实例有一个state属性,当state属性发生改变的时候,组件会重新执行render并重新渲染
      */
    const oBtn = document.getElementById('btn')
    oBtn.onclick = function (){
      content = '超级NB!'
      Root.render(vDOM)
    }
  </script>
</body>

</html>